<template>
  <div>
    <!-- 管理图片按钮 -->
    <el-button type="primary" @click="dialogVisible = true">管理图片</el-button>

    <!-- 弹窗 -->
    <el-dialog
      title="管理商品图片"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleClose"
    >
      <!-- 图片上传组件 -->
      <image-upload
        :file-size="maxFileSize"
        :is-multiple="true"
        :limit="maxImages"
        :value="form.goods_images"
        :file-type="allowedFileTypes"
        @input="afterUpload"
        class="upload-section"
      ></image-upload>

      <!-- 预览已上传的图片 -->
      <div v-if="form.goods_images.length" class="preview-section">
        <el-row :gutter="18">
          <el-col
            :span="3"
            v-for="(image, index) in form.goods_images"
            :key="index"
          >
            <div class="preview-item">
              <img :src="image" alt="商品图片预览" class="preview-image"/>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeImage(index)"></el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 提示信息 -->
      <span class="el-form-item__info">建议图片尺寸：400*400</span>

      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChanges">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/components/UploadFile/image.vue'

export default {
  components: {
    ImageUpload
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    maxImages: {
      type: Number,
      default: 5
    },
    maxFileSize: {
      type: Number,
      default: 1
    },
    allowedFileTypes: {
      type: Array,
      default: () => ['png', 'jpg', 'jpeg']
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        goods_images: this.value.slice() // 使用slice创建副本，避免直接修改props
      }
    }
  },
  watch: {
    value(newValue) {
      this.form.goods_images = newValue.slice() // 确保数据同步
    }
  },
  methods: {
    afterUpload(list) {
      if (!list || !Array.isArray(list)) return
      // 清空当前图片数组并添加新上传的图片
      this.form.goods_images = list.map(file => file.url)
    },
    removeImage(index) {
      this.form.goods_images.splice(index, 1)
    },
    confirmChanges() {
      this.$emit('input', this.form.goods_images) // 同步到父组件
      this.dialogVisible = false
    },
    handleClose() {
      // 取消时可以选择是否保留更改或恢复原状
      // 这里简单处理为不保存更改
      this.form.goods_images = this.value.slice() // 恢复原始状态
    }
  }
}
</script>

<style scoped>
.upload-section {
  margin-bottom: 10px;
}

.preview-section {
  margin-bottom: 20px;
}

.preview-item {
  position: relative;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.el-button--danger {
  position: absolute;
  top: -10px;
  right: -10px;
}

.el-form-item__info {
  font-size: 12px;
  color: #999;
}
</style>
